<template>
  <div class="search_list_wrapper" v-if="historyList.length" >
        <div class="search_list_top" >
          <div class="search_text">搜索历史</div>
          <van-icon name="delete-o" size="16" @click="clearList"/>
        </div>
        <div class="search_list_content">
        <div class="search_list_item"
        @click="changeKey(item)"
         v-for="(item,index) in historyList"
         :key="index"
         >{{ item }}</div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { useRouter } from 'vue-router';
  import { onMounted ,ref} from 'vue';
const emits=defineEmits<{
(e:'clearHistoryList'):void
(e:'clearList'):void
}>()
const props=defineProps(['historyList'])

  const router=useRouter()
  
  
 
  const clearList=()=>{
   emits('clearHistoryList')
   emits('clearList')
    
   }
   const  changeKey=(item:string)=>{
 
//  console.log(item);
  router.push({
      name:"Searchdetail",
      params:{
        keyWord: item
      }
    })
  }
 
  // 判断token是否存在
//   if(localStorage.getItem('xmtoken')){
//     // 跳转 搜索结果列表
//     router.push({
//       name:"Searchdetail",
//       params:{
//         keyWord: item
//       }
//     })

//     }else{

//       // 不存在，跳转登录界面
//       router.push({
//       path:'/login'

//     })
//     }
// }
  </script>
  
  <style lang="less"  scoped>
     .search_list_wrapper{
      .search_list_top{
      padding: 10px 0px 5px;
      font-size: 14px;
        display: flex;
        justify-content: space-between;
  
      }
      .search_list_content{
        display: flex;
        flex-wrap: wrap;
        .search_list_item{
          font-size: 14px;
          background: #f3f4f5;
          height: 30px;
          line-height: 30px;
          text-align: center;
          margin: 5px 10px 10px 0;
          padding: 5px 15px;
          border-radius: 5px;
        }
  
      }
     }
  </style>